<template>
  <!--  <BoxFlexibleHeight bgColor="#fff">-->
  <div v-loading="loading" class="entry-information">
    <EntryInformation
      v-bind="attrs"
      :fetch-entry-list="getUserEntry"
      v-on="$listeners"
      @lookFile="lookFile"
    />
    <EntryContacts :emergency="emergency" />
    <EntryFamily :family-list="familyList" />
    <el-dialog
      :visible.sync="showPreview"
      :title="previewTitle"
      :close-on-click-modal="false"
      width="10%"
    >
      <el-image :src="previewImageUrl" :preview-src-list="srcList" class="show-preview-img" />
    </el-dialog>

  </div>
<!--  </BoxFlexibleHeight>-->
</template>
<script>
import BoxFlexibleHeight from '@/components/BoxFlexibleHeight/index'
import EntryInformation from './c-cpns/EntryInformation/EntryInformation'
import EntryContacts from './c-cpns/EntryContacts/EntryContacts'
import EntryFamily from './c-cpns/EntryFamily/EntryFamily'
import { getEntry } from '@/api/v2/entry'
import { handleFiledData } from '@/utils/handleData'
import { getFiledListInfo } from '@/hooks/userField'
import { getFileType } from '@/utils/handelFile'
export default {
  components: {
    BoxFlexibleHeight,
    EntryInformation,
    EntryContacts,
    EntryFamily
  },
  data() {
    return {
      srcList: [],
      previewImageUrl: '',
      previewTitle: '',
      showPreview: false,
      emergency: [],
      familyList: [],
      fieldList: [],
      infoData: {},
      loading: false
    }
  },
  computed: {
    attrs() {
      const attrs = { ...this.$attrs }
      attrs['infoData'] = this.infoData
      attrs['fieldList'] = this.fieldList
      return attrs
    }
  },
  created() {
    this.getUserEntry()
    this.getFieldsList()
  },
  methods: {
    async getUserEntry() {
      this.loading = true
      try {
        const { data: { status, trend, isquarter }} = await getEntry(this.$route.params.id)
        const { handleArr, experienceArr } = handleFiledData(trend, 'value', 'valueable')
        const params = {
          status,
          isquarter,
          handleArr
        }
        this.infoData = params
        console.log(params, 'params')
        experienceArr.forEach(item => {
          const { label } = item
          if (label === '紧急联系人') {
            this.emergency = []
            if (item.value) {
              this.emergency.push(item.value)
            }
          } else if (label === '家庭情况') {
            if (item.value) {
              this.familyList = item.value
            }
          }
        })
      } catch (error) {
        this.$message.error(error.response?.data?.message ?? '获取入职信息失败')
        console.log(error, 'err')
      } finally {
        this.loading = false
      }
    },
    async getFieldsList() {
      const data = await getFiledListInfo(['user_companys'], 1)
      this.fieldList = data
    },
    lookFile(item) {
      const type = getFileType(item?.url)
      switch (type) {
        case 0:
          this.srcList = []
          this.srcList.push(item?.url)
          this.previewImageUrl = item?.url
          this.previewTitle = item.label + '预览'
          this.showPreview = true
          console.log(this.srcList)
          break
        case 1:
          window.open(item?.url)
          break
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.entry-information{
  padding: 20px;
  background: #fff;
}
</style>
